﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        * {
            padding: 0px;
            margin: 0px;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
            background: #a5a5a5;
            overflow: hidden;
        }
        
        .conten {
            position: relative;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .bg {
            width: 100%
        }
    </style>
</head>

<body>
    <div class="conten">
        <img src="a/AE01.jpg" class="bg">
        <a href="http://fffc.shencui1979.com/house/wai/waizuo/index.html">
            <img src="images/rens.png" style="position: absolute; left: 8%; top: 50%; z-index: 99;" class="huang" />
        </a>
        <a href="http://fffc.shencui1979.com/house/wai/waizhong/index.html">
            <img src="images/rens.png" style="position: absolute; left: 45%; top: 70%; z-index: 99;" class="huang" />
        </a>
        <a href="http://fffc.shencui1979.com/house/wai/waiyou/index.html">
            <img src="images/rens.png" style="position: absolute; right:7.5%; top: 17%; z-index: 99;" class="huang" />
        </a>
    </div>
    
    <script>
        function getStr(string, str) {
            var str_after = string.split(str)[1];

            if (str_after == undefined) {
                str_after = "";
                return false
            }
            if (str_after.indexOf("&")) {
                str_after = str_after.split("&")[0];
            }

            return str_after
        }
        var url = window.location.href;

        var img_src = getStr(url, "?key=");
        


        document.body.addEventListener('mousewheel', onMouseScroll, {
            passive: false
        });
       
        var ks = 1.0;
        var t = 0.1;
        var pos = {
            x: 0,
            y: 0,
        }

        function onMouseScroll(e) {
            e.preventDefault();
            var wheel = event.deltaY;
            // var delta = Math.max(-1, Math.min(1, wheel));
            if (wheel > 0) {
              ks += t;
            } else if (wheel < 0 ){
              ks -= t;
            }
            
            ks = Math.max(0.5, Math.min(2, ks))
            document.body.setAttribute(
                    "style", "transform:" + "scale(" + ks + ")"
                )
                // $("body").css("transform", "scale(" + ks + ")");
        }

        // e = -1 / 1
        function onScale(e) {
          if (e > 0) {
              ks += t;
            } else if (e < 0 ){
              ks -= t;
            }
            ks = Math.max(0.5, Math.min(2, ks))

            document.body.setAttribute(
                "style", "transform:" + "scale(" + ks + ")"
            )
        }
        function onMove(x, y) {
            pos.x += x * 40;
            pos.y += y * 40;
            
            document.body.setAttribute(
                "style", "transform:" + "translate(" + pos.x + "px," + pos.y + "px )"
            )
        }
    </script>
</body>

</html>